<template>
    <div id="place_order">
        <div class="wrapper order_form">
            <div class="form_img">
                <img src="https://cx-img.zmn.cn/Image/order_logo.png" alt="">
            </div>
            <div class="form_tittle"><span>免费预约</span></div>
            <div class="form_data">
                <el-form ref="form" :model="orderForm" :rules="rules" label-width="100px">
                    <el-form-item prop="service_id" label="维修项目：">
                        <el-select  placeholder="请选择维修项目" v-model="orderForm.service_id">
                            <el-option
                            v-for="item in categoryList"
                            :key="item.id"
                            :label="item.service_name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="serviceAddress" label="服务地址：">
                        <el-select v-model="orderForm.serviceAddress" placeholder="请选择地址">
                            <el-option
                            v-for="item in addressList"
                            :key="item.id"
                            :label="item.districts + item.city + item.county + item.full_address"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="appointmentDate" label="预约日期：">
                        <el-date-picker
                        v-model="orderForm.appointmentDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="startTime" label="预约时间：">
                        <el-time-select
                            placeholder="起始时间"
                            v-model="orderForm.startTime"
                            :picker-options="{
                                start: '9:00',
                                step: '00:30',
                                end: '20:30',
                                maxTime: orderForm.endTime
                            }">
                            </el-time-select>
                            <el-time-select
                            placeholder="结束时间"
                            v-model="orderForm.endTime"
                            :picker-options="{
                                start: '9:30',
                                step: '00:30',
                                end: '21:00',
                                minTime: orderForm.startTime
                            }">
                            </el-time-select>
                    </el-form-item>
                    <el-form-item prop="linkman" label="联系人：">
                        <el-input v-model="orderForm.linkman" placeholder="请输入联系人姓名"></el-input>
                    </el-form-item>
                    <el-form-item prop="phone" label="联系电话：">
                            <el-input v-model="orderForm.phone" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                    <el-form-item prop="failure" label="故障描述：">
                                <el-input  type="textarea" v-model="orderForm.failure" placeholder="请输入故障描述"></el-input>
                    </el-form-item>
                    <el-form-item  label="备注：">
                            <el-input  type="textarea" v-model="orderForm.remark" placeholder="请输入备注"></el-input>
                      </el-form-item>
                </el-form>
                  <el-button type="primary" @click="submitOrder">立即预约</el-button>
            </div>
            <div class="form_footer">
                <el-divider content-position="center">服务说明</el-divider>
                <div class="footer_content">
                    <p class="content_item">1、服务时段：9:00-20:00</p>
                    <p class="content_item">2、销售商品、以旧换新费用单独核算；</p>
                    <p class="content_item">3、工程师上门跟用户确认价格后进行服务，若用户选择不维修，需支付30元上门费（防水补漏、墙面刷新、厨卫改造等房屋业务无上门费）。</p>
                    <p class="content_item">4、为了保障您的合法权益和服务质量,避免不必要的损失，请您切勿与工程师私下交易，我们无法对私下交易提供安全和质量保障。</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getAddressService } from '@/api/user'
import { getCategoryListService } from '@/api/repair'
import { releaseOrderService } from '@/api/order'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      categoryList: [],
      addressList: [],
      orderForm: {
        service_id: '',
        serviceAddress: '',
        appointmentDate: '',
        startTime: '',
        endTime: '',
        linkman: '',
        phone: '',
        failure: '',
        remark: ''
      },
      rules: {
        service_id: [{ required: true, message: '请选择服务项目', trigger: 'blur' }],
        serviceAddress: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        appointmentDate: [{ required: true, message: '请选择预约日期', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择开始时间', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!this.orderForm.endTime) {
                callback(new Error('请选择结束时间'))
              }
            },
            trigger: 'blur'
          }],
        linkman: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, len: '11', message: '请输入正确的手机号', trigger: 'blur' }],
        failure: [{ required: true, message: '请输入故障描述', trigger: 'blur' }]
      }
    }
  },
  async created () {
    this.getAddress()
    this.getCategoryList()
  },
  methods: {
    async getAddress () {
      await getAddressService().then(res => {
        this.addressList = res.data
      })
    },
    async getCategoryList () {
      await getCategoryListService().then(res => {
        this.categoryList = res.data
      })
    },
    async submitOrder () {
      // 提交表单前，先验证
      this.$refs.form.validate()
      if (this.$route.query) this.orderForm.maintainer_id = this.$route.query.id
      // TODO：提交表单操作---请求接口
      const res = await releaseOrderService(this.orderForm)
      await Message.success(res.message)
      this.orderForm = {
        service_id: '',
        serviceAddress: '',
        appointmentDate: '',
        startTime: '',
        endTime: '',
        linkman: '',
        phone: '',
        failure: ''
      }
      // console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
#place_order{
    // background-color: pink;
    .order_form{
        margin: 0 auto;
        width: 50%;
        min-height: 600px;
        // text-align: center;
        background-color: #fff;
        border-radius: 0 0 45px 45px;
        .form_img{
            width: 100%;
            img{
                width: 100%;
            }
        }
        .form_tittle{
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            color: rgb(0, 143, 238);
        }
        .form_data{
            margin: 30px auto 0;
            width: 80%;
            /deep/ .el-button{
                width: 100%;
            }

        }
        .form_footer{
            margin-top: 50px;
            // margin: 30px auto 0;
            .el-divider__text{
                font-size: 17px;
                font-weight: bold;
                color: #000000;
            }
            .footer_content{
                margin: 0 auto;
                width: 80%;
                .content_item{
                    font-size: 15px;
                    color: #333333;
                    line-height: 22px;
                    margin-bottom: 16px;
                }
            }
        }
    }
}

</style>
